<template>
  <div class='header-info'>
    <div class='operation'>
      <span>
        <el-icon><Message /></el-icon>
      </span>
      <span>
        <span class='dot'></span>
        <el-icon><ChatDotRound /></el-icon>
      </span>
      <span>
        <el-icon><Search /></el-icon>
      </span>
    </div>

    <div class='info'>
      <el-dropdown>
        <span class='user-info'>
          <el-avatar :size='30' :src='userInfo.avatar'></el-avatar>
          <span class='name'>{{ userInfo.name }}</span>
          <el-icon class='el-icon--right'>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click='logoutFn'>
              <el-icon>
                <CircleClose />
              </el-icon>
              退出系统
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon>
                <InfoFilled />
              </el-icon>
              个人信息
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon>
                <Lock />
              </el-icon>
              修改密码
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { LOGIN_TOKEN, USER_INFO, USER_MENUS } from '@/global/constants'
import { useLoginStore } from '@/stores/login'
import { localCache } from '@/utils/storage'
import { useRouter } from 'vue-router'

const loginStore = useLoginStore()
const userInfo = loginStore.userInfo

const router = useRouter()
const logoutFn = () => {
  localCache.removeStorage(LOGIN_TOKEN)
  localCache.removeStorage(USER_MENUS)
  localCache.removeStorage(USER_INFO)

  router.push('/login')
}
</script>

<style scoped lang='less'>
.header-info {
  display: flex;
  align-items: center;

  .operation {
    display: inline-flex;
    margin-right: 20px;

    span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 35px;

      &:hover {
        background-color: #f2f2f2;
      }

      i {
        font-size: 20px;
      }

      .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 6px;
        height: 6px;
        background-color: red;
        border-radius: 100%;
      }
    }
  }

  .info {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .name {
        margin-left: 5px;
      }
    }

    :global(.el-dropdown-menu__item) {
      line-height: 36px !important;
      padding: 6px 22px;
    }
  }
}
</style>
